<style scoped>
.save-category /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
.save-category /deep/ .el-form-item {
  margin-bottom: 15px;
}
</style>
<!--  -->
<template>
  <div class="save-category">
    <el-dialog title="批量更改分类" :visible.sync="dialogVisible" width="490px" @closed="close" :close-on-click-modal="false">
      <el-form :model="category" v-loading="loading" label-width="80px" :rules="rules" ref="categoryForm">
        <el-form-item label="系统分类" v-if="system" class="width-limit" prop="categoryIds">
          <el-select v-model="category.categoryIds" placeholder="请选择" size="medium" style="width:100%;" :multiple="system && system.systemType && system.systemType.id === 3 ? true : false">
            <el-option label="未分类" :value="-1">
            </el-option>
            <template v-for="item in categories[0]">
              <el-option :key="item.id" :label="item.name" :value="item.id"></el-option>
              <template v-for="ite in categories[item.id]">
                <el-option style="padding-left:36px;" :key="ite.id" :label="ite.name" :value="ite.id"></el-option>
                <template v-for="it in categories[ite.id]">
                  <el-option style="padding-left: 54px;" :key="it.id" :label="it.name" :value="it.id"></el-option>
                </template>
              </template>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    resetData: {
      type: Function
    }
  },
  data () {
    return {
      title: '',
      loading: false,
      dialogVisible: false,
      category: {
        categoryIds: []
      },
      categories: {},
      system: {},
      itemIds: [],
      rules: {
        categoryIds: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    show (system, itemIds) {
      if (!system || !system.id) {
        return
      }
      this.system = system
      this.itemIds = itemIds
      this.dialogVisible = true
      // 获取系统分类
      this.loading = true
      if (system && system.systemType && system.systemType.id === 3) {
        this.category.categoryIds = []
      }
      // 获取所有的分类信息
      this.$post('/category/table-data-infos-by-system-id', { systemId: system.id }).then((resoponse) => {
        if (resoponse.categories) {
          this.categories = resoponse.categories
        } else {
          this.categories = {}
        }
        this.loading = false
      })
    },
    hidden () {
      if (this.$refs['categoryForm']) {
        this.$refs['categoryForm'].clearValidate()
      }
      this.dialogVisible = false
      this.category.categoryIds = []
      this.categories = {}
      this.system = {}
      this.itemIds = []
    },
    close () {
      if (this.$refs['categoryForm']) {
        this.$refs['categoryForm'].clearValidate()
      }
      this.dialogVisible = false
      this.category.categoryIds = []
      this.categories = {}
      this.system = {}
      this.itemIds = []
    },
    save () {
      if (this.loading) {
        return
      }
      this.$refs['categoryForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          let categoryIds = []
          if (this.category.categoryIds instanceof Array) {
            if (this.category.categoryIds.indexOf(-1) !== -1) {
              categoryIds = []
            } else {
              categoryIds = this.category.categoryIds
            }
          } else {
            if (this.category.categoryIds === -1) {
              categoryIds = []
            } else {
              categoryIds.push(this.category.categoryIds)
            }
          }
          let param = {
            categoryIds: categoryIds,
            itemIds: this.itemIds,
            systemId: this.system.id
          }
          this.$jpost('/system/batch-update-category', param).then(response => {
            if (response) {
              this.dialogVisible = false
              this.category.categoryIds = []
              this.categories = {}
              this.system = {}
              this.itemIds = []
              this.loading = false
              this.resetData()
            }
          })
        }
      })
    }
  }
}

</script>
